<div>
    <input ims-select-range-time="rangeDate" type="text">

    <p class="input-group">
        <input type="text" class="form-control" uib-datepicker-popup ng-model="dt" is-open="popup2.opened" datepicker-options="dateOptions" ng-required="true" close-text="Close" />
          <span class="input-group-btn">
            <button type="button" class="btn btn-default" ng-click="open2()"><i class="glyphicon glyphicon-calendar"></i></button>
          </span>
    </p>

    <ui-select ng-model="country.selected" theme="bootstrap" style="width: 300px;">
        <ui-select-match placeholder="测试选择" >{{$select.selected.name}}</ui-select-match>
        <ui-select-choices repeat="country in countries | filter: $select.search">
            <span ng-bind-html="country.name | highlight: $select.search"></span>
            <small ng-bind-html="country.code | highlight: $select.search"></small>
        </ui-select-choices>
    </ui-select>
</div>

<button type="button" class=" btn-default btn btn-primary" ng-click="open()">删除</button>
<button type="button" class=" btn-default btn btn-primary" ng-click="open1()">封禁</button>
<button type="button" class=" btn-default btn btn-primary" ng-click="open2()">成功</button>
<div ng-show="selected">Selection from a modal: {{ selected }}</div>

<div  chart="chartOpt1" style="width: 1000px;height: 500px"></div>
<div  chart="chartOpt2" style="width: 1000px;height: 500px"></div>
<div  chart="chartOpt3" style="width: 1000px;height: 500px"></div>




<style>
    p{padding: 0;margin: 0}
    .searchWapper{
        border: 1px solid #E8E8E8;
        font-size: 12px;
        margin-bottom: 20px;
    }
    .searchWapper .searchLump{
        overflow: hidden;
        margin-bottom: 0;
        border-bottom: 1px solid #E8E8E8;
    }
    .searchWapper .searchTitle{
        float: left;
        width: 78px;
        margin-right: 24px;
        background-color: #BDC2CA;
        text-align: center;
        line-height: 40px;
        color: #fff;
    }
    .searchWapper .searchLump:first-child .btn{
        border: 1px solid #BDC2CA;
        color: #ED5B5E;
    }
    .searchWapper .searchLump .btn-xs {
        line-height: 25px;
        height: 27px;
        margin-top: 6px;
    }
    .searchWapper .close{
        padding-left: 10px;
        color: #ED5B5E;
        font-size: 19px;
        line-height: 24px;
    }
    /*搜索 */
    .panelStyle{
        background-color:#bdc2ca;
        border-bottom: 1px solid #b8bdc6;
        color: #D2D5DA;
        height:45px;
    }
    .panelStyle .panelRow{
        margin-top: -3px;
    }
    .panelStyle .btnSearch button{
        border-left: 0;
    }
    .glyphicon-plus:before,.glyphicon-trash:before{
        color: #fff;
    }
    .search-operation a{
        width: 20px;
    }
    .search-operation a:nth-child(2){
        margin-right: 20px;
    }
    /*  表格THEAD样式，表格内容居中*/

    .table-bordered th{
        background-color: #f3f3f3;
        border-bottom: 1px solid #eaebec;
        color:#8E929B ;
    }
    .table-bordered td{
        height: 50px;
        line-height: 50px;
        color: #555;
    }
    .table-bordered th, .table-bordered td {
        border: 0!important;
        white-space: nowrap;
        text-align: center;
        vertical-align: middle !important;
    }
    .table-bordered .small p{
        font-size: 85%;
        color: #A0A0A0;
        line-height: 1.1;
    }
    .tableResponsive{margin-top: -8px}


    .table-bordered .listBlue{
        color: #A0AEF5;
    }
</style>

<div class="searchWapper">
    <div class="form-group searchLump">
        <div class="searchTitle">筛选：</div>
        <div class="btn btn-xs" ng-hide="!formData.payType">
            <a href="javascript:void(0);"  class="close" ng-click="deletes('payType')">
                <span aria-hidden="true">&times;</span>
            </a>
            {{initData.codeTable[formData.payType]}}
        </div>
        <div class="btn btn-xs" ng-hide="!formData.status">
            <a href="javascript:void(0);"  class="close" ng-click="deletes('status')">
                <span aria-hidden="true">&times;</span>
            </a>
            {{initData.codeTable[formData.status]}}
        </div>
    </div>
    <div class="form-group searchLump">
        <div class="searchTitle">付费：</div>
        <label class="btn btn-xs" ng-class="{on : formData.payType == item}" ng-repeat="item in initData.initCode.payType">
            <input type="radio" class="hide" name="radioPay" value="{{item}}" ng-model="formData.payType">{{initData.codeTable[item]}}
        </label>
    </div>
    <div class="form-group searchLump">
        <div class="searchTitle">状态：</div>
        <label class="btn btn-xs" ng-class="{on : formData.status == item}" ng-repeat="item in initData.initCode.status">
            <input type="radio" class="hide" name="radioStatus" value="{{item}}" ng-model="formData.status">{{initData.codeTable[item]}}
        </label>
    </div>
</div>
<div class="panel panelStyle">
    <div class="panel-heading">
        <div class="row panelRow">
            <div class="col-lg-3">
                <div class="input-group input-group-sm">
                    <input type="text" class="form-control" name="keywords" ng-model="formData.keywords" placeholder="搜索">
						<span class="input-group-btn">
							<button class="btn btn-default" type="button" ng-click="search()">
                                <i class="glyphicon glyphicon-search"></i>
                            </button>
						</span>
                </div>
            </div>
            <div class="search-operation pull-right">
                <a ui-sref="ADPlanMaintenance.param({campaignId:0,advertiserId:advertiserId})" class="btn">
                    <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
                </a>
                <a href="javascript:void(0);" class="btn" ng-click="delTableData()">
                    <span class="glyphicon glyphicon-trash" aria-hidden="true"></span>
                </a>
            </div>
        </div>
    </div>

    <div class="tableResponsive">
        <table class="table table-bordered table-hover">
            <thead>
            <tr>
                <th>选择</th>
                <th>序号</th>
                <th>ID</th>
                <th>广告计划</th>
                <th>推广组</th>
                <th>形式</th>
                <th>广告主</th>
                <th>排期</th>
                <th>更新时间 </th>
                <th>付费</th>
                <th>权重</th>
                <th>状态</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody>
            <tr>
                <td><input type="checkbox" class="magic-checkbox"></td>
                <td>1</td>
                <td>333</td>
                <td><a><p class="listBlue">视频测试广告</p></a></td>
                <td><p class="listBlue">1</p></a></td>
                <td></td>
                <td>秀满天下</td>
                <td class="small">81<p>2016.08.12-2016.10.31</p></td>
                <td>2016.08.12 00:00:00</td>
                <td>测试</td>
                <td>2</td>
                <td>执行中</td>
                <td><span>暂停</span><span>统计</span></td>
            </tr>
            </tbody>
        </table>
    </div>

</div>


